<template>
  <div class="app-container">
    <el-row style="width: 86.3%; top: 6px; z-index: 999; position: fixed">
      <el-col :span="17" class="card-box">
        <div style="display: flex; justify-content: space-between">
          <!-- <span>&nbsp;</span> -->
          <listAll @getsalesGrade="getsalesGrade" />
        </div>
      </el-col>

      <!-- <el-col :span="7">
        <date
          v-model="valueTime"
          :type.sync="groupType"
          @handleChangeTime="handleChangeTime($event)"
        ></date>
      </el-col> -->
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span
              ><i class="el-icon-collection"></i>
              {{ query.salesGrade + " " }}单品{{ commentType }}数Top10</span
            >
            <el-radio-group v-model="commentType" size="mini" @change="init">
              <el-radio-button
                v-for="(item, index) in typeArr"
                :key="index"
                :label="item.value"
                >{{ item.label }}</el-radio-button
              >
            </el-radio-group>
          </div>
          <vebar :chartData="itemData" @vchartData="tableEdit" />
          <!-- <KoiCardI :itemData="itemData" /> -->
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span
              ><i class="el-icon-collection"></i> 单品{{ commentType }}数Top10
              (点击联动)</span
            >
          </div>
          <el-table
            @cell-click="tableEdit"
            :height="400"
            :data="SecondData"
            style="width: 100%"
            border
          >
            <el-table-column align="center" prop="item" label="item">
            </el-table-column>
            <el-table-column
              width="70"
              align="center"
              prop="picUrl"
              label="图片"
            >
              <template #default="scope">
                <image-preview
                  :src="scope.row.picUrl"
                  :width="30"
                  :height="30"
                />
              </template>
            </el-table-column>
            <el-table-column
              width="300"
              align="center"
              prop="productName"
              label="商品名称"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="commentQuantity"
              label="评论数量"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 16px">
      <el-col :span="12">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span><i class="el-icon-collection"></i> 评论组成(点击联动)</span>
            <el-select
              v-model="queryParams.item"
              placeholder="item"
              clearable
              @change="tableEdit"
              size="mini"
            >
              <el-option
                v-for="(dict, i) in CategoryList"
                :key="i"
                :label="dict"
                :value="dict"
              />
            </el-select>
          </div>
          <histogram :chartData="echartDataSku" @vchartData="vchartData" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span
              ><i class="el-icon-collection"></i
              >{{ queryParams.item ? queryParams.item + " " : "" }}
              {{
                queryParams.commentType
                  ? queryParams.commentType + " "
                  : "所有评论"
              }}关键词
            </span>
          </div>
          <div v-if="this.chartsData.length == 0" style="height: 400px"></div>
          <wordCloud
            v-if="this.chartsData.length != 0"
            :chartsData="chartsData"
            :height="'400px'"
            @SetLineChartData="SetLineChartData"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      :visible.sync="openInfo"
      width="1500px"
      append-to-body
      v-if="openInfo"
    >
      <div class="el-dialog-div">
        <component :is="'BiCommentFirstDwd'" :row="row"></component>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectProCommentCount,
  selectProCommentType,
  selectProCommentRank,
} from "@/api/comment/BiCommentFirstDwd";
import KoiCardI from "./zindex/KoiCardI.vue";
import wordCloud from "./zindex/wordCloud.vue";
import barLineI from "./zindex/barLineI.vue";
import histogram from "./zindex/histogram.vue";
import vebar from "./zindex/vebar.vue";
import date from "./common/date";
import listAll from "./components/listAll";
import BiCommentFirstDwd from "@/views/comment/BiCommentFirstDwd/FilterInput.vue";
export default {
  components: {
    date,
    listAll,
    histogram,
    KoiCardI,
    wordCloud,
    barLineI,
    vebar,
    BiCommentFirstDwd,
  },
  props: {
    query: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      row: {},
      openInfo: false,
      CategoryList: [],
      itemData: {},
      chartsData: [],
      echartDataSku: {},
      SecondData: [],
      commentType: "好评",
      typeArr: [
        { value: "差评", label: "差评" },
        { value: "好评", label: "好评" },
        // { value: "近1年", label: "近1年" },
      ],
      queryParams: {},

      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      groupType: "date",
      //时间控件
      timeObj: {},

      // query: {
      //   salesGrade: [],
      //   // dateType: "近30天",
      //   startDate: "",
      //   endDate: "",
      //   dateType: "",
      //   // channelType: "shop",
      // },
    };
  },
  // filters: {
  //   state1(string) {
  //     if (string == "date") {
  //       return "昨日";
  //     }
  //     if (string == "week") {
  //       return "本周";
  //     }
  //   }
  // },
  created() {},
  watch: {
    query: {
      handler: function (newnew, oldold) {
        this.init();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    //选完时间后发请求
    handleChangeTime(timeObj) {
      if (!timeObj.endTime) {
        return;
      }
      this.query.startDate = timeObj.startTime;
      this.query.endDate = timeObj.endTime;
      this.query.dateType = timeObj.dateType;

      this.init();
    },
    //
    getsalesGrade(type) {
      this.query.salesGrade = type;

      this.init();
      // if (type.length == 1) {
      //   this.query.channelType = "brand";
      // } else if (type.length == 2) {
      //   this.query.channelType = "channel";
      // } else if (type.length == 3) {
      //   this.query.channelType = "shop";
      // }
    },
    SetLineChartData(threeLevelCategory) {
      this.row = {
        item: this.queryParams.item,
        // commentType: this.commentType,
        threeLevelCategory: threeLevelCategory,
        ...this.query,
        thisPageSize: 10,
        pageNum: 1,
      };
      this.openInfo = true;
    },
    //点击的时间
    vchartData(secondLevelColumn) {
      this.queryParams.commentType = secondLevelColumn;
      this.getselectProCommentCount();
      // this.row = {
      //   item: this.queryParams.item,
      //   commentType: secondLevelColumn,
      //   ...this.query,
      //   thisPageSize: 10,
      //   pageNum: 1,
      // };
      // delete this.query.threeLevelCategory;
      // this.openInfo = true;
    },
    init() {
      this.queryParams = {
        startDate: this.query.startDate,
        endDate: this.query.endDate,
        dateType: this.query.dateType,
        salesGrade: this.query.salesGrade,

        commentTop: "10",
      };
      selectProCommentRank({
        commentType: this.commentType,
        ...this.queryParams,
      }).then((response) => {
        this.CategoryList = response.map((item) => item.item);
        console.log(JSON.stringify(this.CategoryList));
        this.queryParams.item = this.CategoryList[0];
        this.tableEdit();

        this.SecondData = response;
        this.itemData = {
          columns: ["日期", "评论数"],
          rows: [],
        };
        response.forEach((item) => {
          this.itemData.rows.push({
            日期: item.item,
            评论数: item.commentQuantity,
          });
        });
        return;
        this.itemData = response;
      });
    },
    tableEdit(row) {
      if (row) {
        this.queryParams.item = row.item ? row.item : row;
      }

      this.getselectProCommentCount();
      this.getselectProCommentType();
    },
    getselectProCommentCount() {
      selectProCommentCount(this.queryParams).then((response) => {
        this.chartsData = this.transformFeedbackArray(response);
      });
    },
    getselectProCommentType() {
      delete this.queryParams.commentType;
      selectProCommentType(this.queryParams).then((response) => {
        this.echartDataSku = {
          columns: ["日期", "评论数"],
          rows: [],
        };
        response.forEach((item) => {
          this.echartDataSku.rows.push({
            日期: item.propertyValue,
            评论数: item.propertyValueCount,
          });
        });
      });
    },
    transformFeedbackArray(feedbackArray) {
      // 使用 map 方法遍历原始数组，并返回一个新的数组
      return feedbackArray.map((item) => {
        // 从当前项中提取 propertyValue 和 propertyValueCount
        const name = item.propertyValue;
        const value = item.propertyValueCount; // 将字符串转换为整数

        // 返回一个包含 name 和 value 的新对象
        return { name, value };
      });
    },
    // handleGo(path) {
    //   this.$router.push({
    //     path: path,
    //   });
    // },
  },
};
</script>

<style>
</style>